<template>
	<view class="">
		<view class="bg-white">
			<view class="u-p-x-30 u-p-b-30">
				<view class="flex align-center justify-between u-p-y-30 u-border-bottom">
					<u-avatar :src="team_user.avatar" size="67"></u-avatar>
					<view class="flex-1 flex align-center justify-between u-p-l-20">
						<text>团长：{{team_user.username}}</text>
						<text>{{team_user.text}}</text>
					</view>
				</view>
				<!-- 商品 -->
				<view class="flex align-center u-p-y-30 u-border-bottom">
					<u-image :src="goods.goods_image" width="108rpx" height="108rpx" borderRadius="10"></u-image>
					<view class="flex-1 flex flex-column justify-between u-p-l-20" style="height: 108rpx">
						<view class="text-ellipsis-2">
							<text class="">{{goods.goods_name}}</text>
						</view>
						<text class="text-danger u-font-28 u-p-t-10 font-weight-bold">¥{{goods.goods_price}}</text>
					</view>
				</view>
				
				<view class="flex flex-column align-center justify-center">
					<text class="font-30">{{goods.need_num}}人团</text>
					<view class="flex align-center flex-wrap justify-between">
						<block v-for="(item,index) in orders" :key="index">
							<u-avatar class="u-m-x-20 u-m-t-20" :src="item.avatar" ></u-avatar>
						</block>
					</view>
					<view class="flex align-end u-p-t-20" v-if="goods.status != 3">
						<text class="u-font-26">还差 {{teamInfo.gap_num}} 人组团成功！</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 倒计时 -->
		<view class="u-m-50" v-if="goods.status != 3">
			<view class="">
				<u-divider bgColor="#f2f2f2" borderColor="#333">
					<view class="flex align-center">
						<text class="u-font-26 text-dark">剩余</text>
						<view class="u-p-x-10">
							<u-count-down :timestamp="teamInfo.duetime" bgColor="#ca0e1d" font-size="26" color="#fff" border-color="#ca0e1d"></u-count-down>
						</view>
						<text class="u-font-26 text-dark">结束</text>
					</view>
				</u-divider>
			</view>
		</view>
		<view class="position-fixed bottom-0 left-0 right-0" v-if="goods.status !== 20 && teamInfo.gap_num != 0">
			<view class="safe-bottom">
				<u-button type="warning" @click="tuBuy">去拼单</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import { GroupCenterApi } from '@/api/serves.js'
	export default {
		data() {
			return {
				id: '',
				teamInfo: {},
				info: {},
				team_user: {}, //团长信息
				goods: {}, // 拼团商品
				orders: [], // 拼团人数
				teamLeader: {},
			}
		},
		onLoad(options) {
			this.id = options.id
			this._teamInfo()
		},
		methods: {
			_teamInfo() {
				uni.showLoading()
				GroupCenterApi.getTeamDetail({groups_team_id: this.id}).then(res => {
					uni.hideLoading()
				  console.log('拼团详情', res);
					if(res.code == 1){
						this.teamInfo = res.data
						this.team_user = res.data.team_user
						this.goods = res.data.team;
						this.orders = res.data.orders;
					}else {
						this.$Toast(res.msg)
					}
				})
			},
			tuBuy() {
				let str = `groups_goods_id=${this.goods.groups_goods_id}&groups_team_id=${this.id}`
				uni.navigateTo({
					url: '/pages/group/groupOrderAdd/groupOrderAdd?' + str
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
::v-deep.u-countdown-item {
	padding: 5rpx 20rpx;
	border-radius: 20rpx;
}
</style>
